import { createContext } from 'react'
import { createPortal } from 'react-dom'
// portal 传送门，可以将react元素传送到任意dom结构中
// createPortal(reactElement,dom),里面两个参数

// 创建一个dom元素
let md = document.createElement('div')
md.id = 'md'
document.body.appendChild(md)

// 两个api
// Provider 提供
// Consumer 消费

// 声明一个主体颜色
type Itheme = {
    color:string
}
// 括号中接受的是默认参数
// 当没有使用Provider的时候，那么默认的参数就会被使用上
let {Provider,Consumer} = createContext<Itheme>( {color:'pink'} )

type Iprops = {
    name:string
}

// A组件
function A (){
    let name = '橘子'
    return(
        <fieldset>
            <legend>A组件</legend>
            <h1>A组件</h1>
            <Provider value={{color:'green'}}>
                <B name={name}/>
            </Provider>
        </fieldset>
    )
}

// B组件
function B (props:Iprops) {
    return(
        <fieldset>
            <legend>B组件</legend>
            <h1>B组件</h1>
            <C name={props.name}/>
        </fieldset>
    )
}

// C组件
function C (props:Iprops) {
    return(
        <fieldset>
            <legend>C组件</legend>
            <h1>C组件</h1>
            <D name={props.name}/>
        </fieldset>
    )
}

// D组件
function D (props:Iprops){
    // 把return 改成一个变量去接收
    let el = (
        <fieldset>
            <legend>D组件</legend>
            <Consumer>
                {
                    (theme) => {
                        // console.log(theme);
                        return(
                            <h1 style={{color:theme.color}}>D组件</h1>
                        )
                    }
                }
            </Consumer>
        </fieldset>
    )
    return createPortal(el,md)
}

export default A